<template>
    <div class="h-screen ">
        <UpPullLoad @trigger="loadMore">
            <div
                class="absolute top-0 left-0 right-0 z-10 flex items-center justify-between h-12 px-4 text-white transition-colors">
                <div>
                    <Back class="!bg-white/0 " />
                </div>

                <div class="flex items-center space-x-2">
                    <IClarity:dot-circle-line />
                    <Share />
                </div>
            </div>
            <div class="sticky top-0 h-40 text-lg bg-center">
                <LazyImage :src="g" />
            </div>
            <div class="relative text-sm text-gray-700 bg-white rounded-t-xl -top-4">
                <div class="sticky top-0 z-20 p-3 text-base font-bold bg-white rounded-t-xl">
                    <div>充足的运动量是猫咪更健康</div>
                </div>
                <div class="p-4 ">
                    <UserCell />
                    <div class="py-4 leading-5">
                        波斯猫(Persian cat)是以阿富汗的土种长毛猫和土耳其的安哥拉长毛猫为基础，在英国经过100多年的选种繁殖，于1860年诞生的一个品种。
                    </div>
                    <LikeCommentShareTool />
                </div>
                <div class="">
                    <div class="px-4">
                        <TitleCell title="相关推荐" />
                    </div>
                    <div class="px-4 mt-4 space-x-4 overflow-x-auto whitespace-nowrap">
                        <div class="inline-flex w-5/6 p-2 bg-gray-100 rounded-md" v-for="(item, index) in 2">
                            <div class="whitespace-normal grow">
                                <div class="text-base text-gray-700 line-clamp-1">有哪些食物猫咪不能吃？</div>
                                <div class="mt-1 text-xs text-gray-400 line-clamp-2">
                                    有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？
                                </div>
                            </div>
                            <div class="w-16 h-16 ml-2 overflow-hidden rounded-lg shrink-0 ">
                                <LazyImage :src="g" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-4">
                    <TitleCell title="评论" />
                    <div class="py-4 space-y-8 text-sm text-gray-600">
                        <div v-for="(item, index) in 8">
                            <UserCell size="sm">
                                <template #extend>
                                    <div class="flex items-center text-gray-500">
                                        <ITabler:thumbUp />
                                        <div class="text-xs">31</div>
                                    </div>
                                </template>
                                <template #description>
                                    1 天前
                                </template>
                            </UserCell>
                            <div class="ml-8 ">
                                <div class="mt-3 text-gray-600">
                                    有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃？
                                </div>
                                <div class="p-2 mt-4 leading-6 bg-gray-100 rounded-sm">
                                    <div>章三：统一</div>
                                    <div>okok: i im hero</div>
                                    <div class="flex items-center mt-2 space-x-1" @click="showComment">
                                        <div>共 300 条回复</div>
                                        <IMingcute:rightFill />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </UpPullLoad>
        <Popup ref="commentRef">
            <div class="flex flex-col bg-white h-3/4">
                <div class="p-2 shrink-0">
                    <TitleCell title="详情">
                        <template #extend>
                            <IRi:closeFill @click="closeComment"/>
                        </template>
                    </TitleCell>
                </div>
                <div class="overflow-hidden text-sm text-gray-600 border-t grow">
                    <UpPullLoad @trigger="loadComment" :distance="100">
                        <div class="p-4">
                            <UserCell size="sm">
                                <template #extend>
                                    <div class="flex items-center text-gray-500">
                                        <ITabler:thumbUp />
                                        <div class="text-xs">31</div>
                                    </div>
                                </template>
                                <template #description>
                                    1 天前
                                </template>
                            </UserCell>
                            <div class="ml-8 ">
                                <div class="mt-3 text-gray-600">
                                    有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃有哪些食物猫咪不能吃？
                                </div>
                                <LikeCommentShareTool class="mt-4" />
                            </div>
                        </div>
                        <div class="h-2 bg-gray-100"></div>
                        <div class="divide-y ">
                            <div v-for="(item, index) in 4" class="p-4">
                                <UserCell size="sm">
                                    <template #extend>
                                        <div class="flex items-center text-gray-500">
                                            <ITabler:thumbUp />
                                            <div class="text-xs">31</div>
                                        </div>
                                    </template>
                                    <template #description>
                                        1 天前
                                    </template>
                                </UserCell>
                                <div class="ml-8 ">
                                    <div class="mt-3 text-gray-600">
                                        你知道的太多了
                                    </div>
                                    <LikeCommentShareTool class="mt-4" />
                                </div>
                            </div>
                        </div>
                    </UpPullLoad>
                </div>
            </div>
        </Popup>
    </div>
</template>
    
<script setup lang='ts'>
import g from '~/assets/ad/ad1.jpg'
import a from '~/assets/circle/cat1.png'
import { useIntersectionObserver } from '@vueuse/core';
const commentRef = ref()

const comments = ref<any>([
    1, 2, 3, 4, 5
])
const showComment = () => {
    commentRef.value?.open();
}
const closeComment = ()=>{
    commentRef.value?.close();
}

const loadMore = ({ done }: any) => {
    setTimeout(() => {
        comments.value.push(1, 2, 3, 4, 5)
        done()
    }, 200);
}
const loadComment = ({ done }: any) => {
    setTimeout(() => {
        done()
    }, 200);
}
</script>
    
<style></style>